<template>
  <div class="pagination">
    <el-pagination
      v-bind="_paginationConfig"
      @size-change="pageSizeChange"
      @current-change="currentPageChange"
    ></el-pagination>
  </div>
</template>
<script lang="ts" setup>
// 父组件传递数据
const props = defineProps({
  pageConfig: {
    type: Object,
  },
});

// 合并分页配置
const _paginationConfig = computed(() => {
  const config = {
    total: 0,
    currentPage: 1,
    pageSize: 10,
    pageSizes: [10, 20, 30, 40, 50, 100],
    layout: 'total, sizes, prev, pager, next, jumper',
  };
  return Object.assign(config, props.pageConfig);
});

// 定义暴露事件名
const emit = defineEmits([
  'pagination-change', // currentPage或者pageSize改变触发
  'size-change', // pageSize事件
  'current-change', // currentPage按钮组事件
]);

// 切换pageSize
const pageSizeChange = (pageSize: number) => {
  emit('size-change', pageSize);
  emit('pagination-change', 1, pageSize);
};

// 切换currentPage
const currentPageChange = (currentPage: number) => {
  emit('current-change', currentPage);
  emit('pagination-change', currentPage, props.pageConfig.pageSize);
};
</script>

<style lang="scss" scoped></style>
